<template>
    <div class="group">
        <div class="title">
            <img class="back" src="../assets/Fill 1@2.88x.png" alt="" @click="backs">
            {{navtitle}}
        </div>
        <div class="content">
            <div class="con-up">
                <p class="up-left">团长招募</p>
                <img class="up-right" src="../assets/image/ic_next_grayArrow.png" alt="" @click="getRecruit()">
            </div>
            <div class="con-down">
                <p class="do-left">活动管理</p>
                <img class="do-right" src="../assets/image/ic_next_grayArrow.png" alt="" @click="getActivtiy()">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'group',
    data(){
        return{
            navtitle:'团购管理',
            result:''
        }
    },
    methods:{
        backs(){
            this.$router.back(-1)
        },
        getRecruit(){
                this.$router.replace('/recruit')
        },
        getActivtiy(){
                this.$router.replace('/activtiy')
        }
    },
}
</script>

<style lang="scss" scoped>
.group{
    width: 100%;
    height: 100%;
    .title{
        height: 0.435rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #030303;
        font-size: 0.18rem;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 999;
        .back{
            position: absolute;
            left:0.14rem;
            bottom: 0.1rem; 
            width: 0.1rem;
            height: 0.18rem;
        }
        &::after{
            content: "";
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background: #ccc;
            height: 1px;
            transform:scale(1,0.5) 
        }
    }
    .content{
        width: 100%;
        .con-up{
            width: 100%;
            height: 0.44rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.14rem;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #eee;
            .up-left{
                font-size: 0.12rem;
                color: #333;
            }
            .up-right{
                position: absolute;
                right: 0.12rem;
                top: 0.15rem; 
                width: 0.075rem;
                height: 0.12rem;
            }
        }
        .con-down{
            width: 100%;
            height: 0.44rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.14rem;
            box-sizing: border-box;
            position: relative;
            .do-left{
                font-size: 0.12rem;
                color: #333;
            }
            .do-right{
                position: absolute;
                right: 0.14rem;
                top: 0.15rem; 
                width: 0.075rem;
                height: 0.12rem;
            }
        }
    }
}
</style>
